<template>
  <view class="video">
    <view class="video-con">
      <view class="video-con-left">
        <!-- 定位 -->
        <view class="position">

          <image src="../../static/resort/video/dingwei.png" class="dingwei" mode=""></image>
          <view class="distance">
            35.4km
          </view>
          <view class="area">
            武汉市·东湖风景区
          </view>
        </view>
        <!-- 定位 -->
        <!-- 名字 -->
        <view class="nomenclature">
          <view class="name">屈强的张三</view>
          <image src="../../static/resort/video/daV.png" mode="" class="daV"></image>
          <view v-for="(item,index) in nomenclatureList" :key="index" class="name-for">
            {{item.name}}
          </view>
        </view>
        <!-- 名字 -->
        <!-- 工资 -->
        <view class="wages">
          ￥8000元/月
        </view>
        <!-- 工资 -->
        <!-- 语音-->
        <view class="voice">
          <image src="../../static/resort/video/yuyin.png" mode="" class="yuyin"></image>
          <view class="number">
            60"
          </view>
          <view class="text">
            这个地方显示的是语音
          </view>
        </view>
        <!-- 语音-->
        <!-- 文本内容 -->
        <view class="text-lang">
          <u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :showHeight="showHeight" toggle @open="open"
            @close="close">
            <u-parse :content="content" @load="load" :tag-style="tagStyle"></u-parse>
          </u-read-more>
        </view>
        <!-- 文本内容 -->
        <!-- 按钮 -->
        <view class="button">
          <u-button text="交谈" class="button1"></u-button>
          <u-button text="支付" class="button2"></u-button>
        </view>
        <!-- 按钮 -->
      </view>
      <view class="video-con-right">
        <!-- 头像 -->
        <view class="user">
          <view class="user-img">
            <image src="../../static/resort/video/user.png" mode=""></image>
            <view class="add" @click="show1=!show1;toggle('top')">
              +
            </view>
            <uni-popup ref="popup1" @change="change">
              <view class="popup-content">
                <view class="text">
                  是你感兴趣的内容吗？
                </view>
                <view class="button">
                  <u-button text="是的" class="button1"></u-button>
                  <u-button text="还可以" class="button1"></u-button>
                  <u-button text="不是" class="button1"></u-button>
                </view>
              </view>
            </uni-popup>
            <view class="friend" v-if="show1" @click="messageToggle('success')">
              好友
            </view>
            <uni-popup ref="message" type="message">
              <uni-popup-message :type="msgType" :duration="2000">
                <view class=" friendflex ">
                  <image src="../../static/resort/video/sucess.png" mode="" class="sucess"></image>
                  已发送好友申请
                </view>
              </uni-popup-message>
            </uni-popup>
            <view class="sex">
              <image src="../../static/message/sex_man.png" mode=""></image>
            </view>
          </view>
        </view>

        <!-- 头像 -->
        <!-- 消息 -->
        <view class="message">
          <view class="message-for" @click="show5= true">
            <image src="../../static/resort/video/liuyan.png" mode="" style="width: 80rpx; height: 70rpx; ">
            </image>
            <view class="number">
              3.5万
            </view>
            <u-popup :show="show5" :round="10" mode="bottom" @open="open">
              <view>
                <view class="liuyanbox">
                  <view class="top">
                    <view class="payment">
                      8000+人付款
                    </view>
                    <image src="../../static/resort/need/block_close.png" class="close" mode="" @click="close1()">
                    </image>
                  </view>

                  <view class="position">
                    <image src="../../static/resort/dingwei-green.png" mode="" class="dingwei"></image>
                    <view class="text-green">
                      35.4km
                    </view>
                    <view class="weizhi">
                      湖北省 武汉市 洪山区 保利制时代社区<br>保利时代K33项目 飞飞大排档
                    </view>
                  </view>
                  <view class="evaluate-con">
                    <view class="evaluate">
                      <view class="text">
                        评价
                        <text class="huise">(8777+)</text>
                      </view>
                      <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
                    </view>
                    <!-- 标签 -->
                    <view class="tag-flex">
                      <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
                        <u-tag :text="item.text" :plain="!item.checked" type="error" :name="index" @click="radioClick">
                        </u-tag>
                      </view>
                    </view>
                    <!-- 标签 -->
                    <scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
                      <view class="user-con">
                        <view class="user-for">
                          <view class="user-top">
                            <view class="img">
                              <image src="../../static/resort/video/img1.png" mode="" class="img1"></image>
                            </view>
                            <view class="sex">
                              <image src="../../static/message/sex_man.png" mode=""></image>
                            </view>
                            <view class="text">
                              <view class="text1">
                                我叫王*****
                              </view>
                              <view class="text2">
                                2022-8-15 13：48：55
                              </view>
                            </view>
                          </view>
                          <view class="user-bottom">
                            <view v-for="(item,index) in userbottomList" :key="index">
                              <view class="text">
                                {{item.text}}
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                      <!-- 复制1 -->
                      <view class="user-con">
                        <view class="user-for">
                          <view class="user-top">
                            <view class="img">
                              <image src="../../static/resort/video/img1.png" mode="" class="img1"></image>
                            </view>
                            <view class="sex">
                              <image src="../../static/message/sex_man.png" mode=""></image>
                            </view>
                            <view class="text">
                              <view class="text1">
                                我叫王*****
                              </view>
                              <view class="text2">
                                2022-8-15 13：48：55
                              </view>
                            </view>
                          </view>
                          <view class="user-bottom">
                            <view v-for="(item,index) in userbottomList" :key="index">
                              <view class="text">
                                {{item.text}}
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                      <!-- 复制1 -->
                      <!-- 复制2 -->
                      <view class="user-con">
                        <view class="user-for">
                          <view class="user-top">
                            <view class="img">
                              <image src="../../static/resort/video/img1.png" mode="" class="img1"></image>
                            </view>
                            <view class="sex">
                              <image src="../../static/message/sex_man.png" mode=""></image>
                            </view>
                            <view class="text">
                              <view class="text1">
                                我叫王*****
                              </view>
                              <view class="text2">
                                2022-8-15 13：48：55
                              </view>
                            </view>
                          </view>
                          <view class="user-bottom">
                            <view v-for="(item,index) in userbottomList" :key="index">
                              <view class="text">
                                {{item.text}}
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                      <!-- 复制2 -->
                      <!-- 复制2 -->
                      <view class="user-con">
                        <view class="user-for">
                          <view class="user-top">
                            <view class="img">
                              <image src="../../static/resort/video/img1.png" mode="" class="img1"></image>
                            </view>
                            <view class="sex">
                              <image src="../../static/message/sex_man.png" mode=""></image>
                            </view>
                            <view class="text">
                              <view class="text1">
                                我叫王*****
                              </view>
                              <view class="text2">
                                2022-8-15 13：48：55
                              </view>
                            </view>
                          </view>
                          <view class="user-bottom">
                            <view v-for="(item,index) in userbottomList" :key="index">
                              <view class="text">
                                {{item.text}}
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                      <!-- 复制2 -->
                    </scroll-view>
                  </view>
                </view>
                <!-- 留言 -->
              </view>
            </u-popup>
          </view>
          <view class="message-for" @click="show2=!show2">
            <image src="../../static/resort/video/collect.png" mode="" style="width: 80rpx; height: 70rpx; "
              v-if="show2==false" @click="cancel">
            </image>
            <image src="../../static/resort/video/collect-yellow.png" mode="" style="width: 80rpx; height: 70rpx; "
              v-if="show2" @click="collect">
              <view class="number">
                3.5万
              </view>
          </view>
          <view class="message-for" @click="show6= true">
            <image src="../../static/resort/video/transmit.png" mode="" style="width: 80rpx; height: 70rpx; ">
            </image>
            </image>
            <view class="number">
              3.5万
            </view>
            <!-- 转发 -->

            <u-popup :show="show6" :round="10" mode="bottom" @open="open">
              <view class="forward">
                <view class="top">
                  <view class="forword-top">
                    <image src="../../static/resort/video/img3.png" mode="" class="img3"></image>
                    <view class="name">
                      飞飞大排档
                    </view>
                    <image src="../../static/resort/video/rightjiantou.png" class="jiantou" mode=""></image>
                  </view>
                  <image src="../../static/resort/need/block_close.png" mode="" class="close" @click="close()"></image>
                </view>

                <view class="forward-people">
                  <view class="title">
                    转发给:
                  </view>
                  <u-scroll-list>
                    <view class="people">
                      <view class="people-for" v-for="(item,i) in peopleList" :key="i" @click="addred(i)">
                        <view class="img">
                          <image :src="item.img1" mode="" class="img1"></image>
                        </view>
                        <view class="sex">
                          <image :src="item.img2" mode=""></image>
                        </view>
                        <view class="red" v-if="item.show">
                          <image :src="item.img3" mode="" class="red"></image>
                        </view>
                        <view class="name">
                          {{item.name}}
                        </view>
                      </view>
                    </view>
                  </u-scroll-list>
                </view>
                <view class="forward-con1" v-if="hidd==true">
                  <view class="forward-con1-top ">
                    <u--textarea v-model="value" placeholder="请输入内容" class="textarea"></u--textarea>
                    <view class="kong">

                    </view>
                    <image src="../../static/resort/video/img4.png" mode="" class="img4"></image>
                  </view>

                  <view class="button">
                    <u-button type="error" text="发送"></u-button>
                  </view>
                </view>
                <view class="forward-con" v-if="hidd==false">
                  <view class="share-bottom">
                    <view class="share-bottom-item">
                      <view class="share-image">
                        <image src="../../static/resort/need/weixin.png" mode=""></image>
                      </view>
                      <view class="share-tit">
                        转发给好友
                      </view>
                    </view>
                    <view class="share-bottom-item">
                      <view class="share-image">
                        <image src="../../static/resort/need/circle_of_friends.png" mode=""></image>
                      </view>
                      <view class="share-tit">
                        分享到朋友圈
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </u-popup>

            <!-- 转发 -->
          </view>
          <view class="message-for">
            <image src="../../static/resort/video/problem.png" mode="" style="width: 80rpx; height: 70rpx; ">
            </image>

            <view class="number"></view>


          </view>
        </view>
        <!-- 消息 -->
      </view>
    </view>
  </view>
</template>

<script>
  import liuyan from "../../../help_app/static/resort/video/liuyan.png";
  import clloect from "../../../help_app/static/resort/video/collect.png"
  import transmit from "../../../help_app/static/resort/video/transmit.png"
  import problem from "../../../help_app/static/resort/video/problem.png"
  export default {
    components: {
      liuyan
    },
    data() {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false,
        show6: false,
        check: [],
        value: "",
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        content: `<p>我叫XXX，是一名厨师。毕业后一直从事厨师岗位现在已经有10年工作经验了。熟悉各种菜系，在各大酒店都有工作经历。现招一份。毕业后一直从事厨师岗位现在已经有10年工作经验了。熟悉各种菜系,在各大酒店都有工作经历。现招一份;毕业后一直从事厨师岗位现在已经有10年工作经验了。熟悉各种菜系,在各大酒店都有工作经历。现招一份;毕业后一直从事厨师岗位现在已经有10年王作经验了。热悉各种菜系，在各大酒店都有工作经历。</p>`,
        showHeight: 200,
        tagStyle: {
          p: 'color: #fff; line-height: 24px;'
        },
        popupData: {
          closeable: true,
        },
        shadowStyle: {
          backgroundImage: "none",
          paddingTop: "0",
          marginTop: "20rpx"
        },
        type: 'center',
        msgType: 'success',
        messageText: '这是一条成功提示',
        messageList: [{
            img: liuyan,
            Number: "3.5万"
          },
          {
            img: clloect,
            Number: "3.5万"
          }, {
            img: transmit,
            Number: "3.5万"
          }, {
            img: problem,
            Number: ""
          }
        ],
        nomenclatureList: [{
            name: "厨师",
          },
          {
            name: "为人踏实",
          }, {
            name: "勤奋能干",
          },
        ],
        hidd: false,
        listfriend: [{
          type: 'default',
          message: "锦瑟无端五十弦",
          iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
        }],
        radios: [{
            checked: true,
            text: "全部"
          },
          {
            checked: false,
            text: "最新"
          },
          {
            checked: false,
            text: "环境优美"
          },

          {
            checked: false,
            text: "饭菜可口"
          },

          {
            checked: false,
            text: "方便"
          }
        ],
        userbottomList: [{
          text: "网红打卡"
        }, {
          text: "网红打卡"
        }, {
          text: "网红打卡"
        }],
        peopleList: [{
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            show: false,
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          },
          {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          }, {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          }, {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          }, {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          }, {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          }, {
            show: false,
            img1: "/static/resort/video/img1.png",
            name: " 专业香蕉 零食批发",
            img2: "/static/message/sex_man.png",
            img3: "/static/resort/need/red-answer.png"
          },
        ]
      };
    },
    methods: {
      addred(i) {
        this.peopleList[i].show = !this.peopleList[i].show;
        this.peopleList.forEach((item) => {
          this.check.push(item.show);
          // console.log(this.check);
        })
        if (this.check.indexOf(true) !== -1) {
          this.hidd = true
        }

      },
      load() {
        this.$refs.uReadMore.init()
      },
      open(name) {
        console.log('open', name);
      },
      close(name) {
        console.log('close', name);
      },
      // 添加关注
      change(e) {
        console.log('当前模式：' + e.top + ',状态：' + e.show);
      },
      toggle(top) {
        this.top = top
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup1.open(top)
      },
      // 收藏
      open() {
        // console.log('open');
      },

      close1() {
        this.show5 = false
        // console.log('close');
      },
      close() {
        this.show6 = false
        // console.log('close');
      },
      cancel() {
        if (this.show2 == false) {
          uni.showToast({
            title: '收藏成功',
            duration: 1000
          });
        }
      },
      collect() {
        if (this.show2) {
          uni.showToast({
            title: '取消收藏',
            duration: 1000
          });
        }
      },
      // 好友
      messageToggle(success) {
        this.msgType = success
        this.messageText = `这是一条${success}消息提示`
        this.$refs.message.open()
      },
      radioClick(name) {
        this.radios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop
      }
    },
  }
</script>

<style lang="scss">
  page {

    background-image: url('../../static/resort/video/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .video {
    width: 100vw;
    height: 90vh;
    position: relative;

    .video-con {
      width: 90vw;
      margin: auto;
      // height: 45vh;
      // background-color: #fff;
      position: absolute;
      left: 5%;
      // top: 35%;
      bottom: -100rpx;
      display: flex;
      justify-content: space-between;
    }

    .video-con-left {

      width: 75%;
      // position: relative;
      // border: 1px solid #fff;

      // <!-- 定位 -->
      .position {
        display: flex;

        .dingwei {
          width: 36rpx;
          height: 36rpx;
        }

        .distance {
          margin: 0 15rpx;
          font-size: 24rpx;
          color: #fff;
        }

        .area {
          font-size: 24rpx;
          color: #fff;
        }
      }

      // <!-- 定位 -->
      // 名字
      .nomenclature {
        margin-top: 15rpx;
        display: flex;
        align-items: center;

        .name {
          color: #fff;
          font-size: 32rpx;
          margin-right: 10rpx;
        }

        .daV {
          width: 25rpx;
          height: 34rpx;
          margin-right: 5rpx;
        }

        .name-for {
          font-size: 25rpx;
          color: #fff;
          padding: 6rpx 5rpx;
          margin: 5rpx;
          border-radius: 15rpx;
          background: rgba(255, 255, 255, 0.2);
        }
      }

      // 名字
      // <!-- 工资 -->
      .wages {
        margin-top: 15rpx;
        color: rgb(255, 255, 0);
        font-family: Noto Sans SC;
        font-size: 36rpx;
        font-weight: 500;
        letter-spacing: 0px;
        text-align: left;
      }

      // <!-- 工资 -->
      // <!-- 语音-->
      .voice {
        margin-top: 15rpx;
        width: 370rpx;
        height: 60rpx;
        color: #fff;
        padding: 10rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.3);
        border-radius: 88rpx;
        display: flex;
        align-items: center;

        .yuyin {
          margin-right: 20rpx;
          width: 32rpx;
          height: 32rpx;
        }

        .number {
          margin-right: 15rpx;
        }

        .text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      // <!-- 语音-->
      // 文本内容
      .text-lang {
        color: #fff;
        margin-bottom: 30rpx;
        // position: absolute;
        // bottom: 0;
      }

      // 文本内容
      // <!-- 按钮 -->
      .button {
        margin-top: 15rpx;
        display: flex;
        justify-content: space-between;

        .button1 {
          width: 48%;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 16rpx;
          border: none;
          color: #fff;

        }

        .button2 {
          border: none;
          width: 48%;
          color: #fff;
          border-radius: 16rpx;
          background: rgba(255, 42, 49, 0.7);
        }
      }

      // <!-- 按钮 -->
    }

    .video-con-right {
      width: 25%;
      // border: 1px solid #fff;

      .user {
        .user-img {
          width: 100rpx;
          height: 100rpx;
          margin: 20% auto 0;
          position: relative;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .add {
          width: 36rpx;
          height: 36rpx;
          color: #fff;
          font-size: 32rpx;
          background: rgb(255, 42, 49);
          border-radius: 50%;
          text-align: center;
          line-height: 36rpx;
          font-weight: bold;
          position: absolute;
          top: 80%;
          left: 35%;
          // align-content: center;
          margin: auto;
          // display: none;
        }

        .popup-content {
          color: #fff;
          width: 75%;
          text-align: center;
          margin-top: 200rpx;
          margin: 200rpx auto;

          .button {
            display: flex;
            margin: auto;
            text-align: center;
          }

          .button1 {
            width: 48%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 16rpx;
            border: none;
            color: #fff;
            margin: 20rpx;
          }
        }

        .friend {
          color: #fff;
          font-size: 32rpx;
          font-size: 20rpx;
          padding: 10rpx 20rpx;
          background: rgb(7, 193, 96);
          border-radius: 20rpx;
          text-align: center;
          // line-height: 36rpx;
          font-weight: bold;
          position: absolute;
          top: 80%;
          left: 13%;
          // align-content: center;
          margin: auto;
        }

        .friendflex {
          display: flex;

          .sucess {
            width: 44rpx;
            height: 44rpx;
          }
        }


        .sex {
          width: 28rpx;
          height: 28rpx;
          padding: 0 10rpx 10rpx 0;
          position: absolute;
          top: 0%;
          left: 80%;

          image {
            // margin: auto;
            width: 28rpx;
            height: 28rpx;
          }
        }

      }

      .message {
        // margin: auto;
        margin: 50rpx 25% 0;
        // border: 1px solid #fff;

        image {
          width: 100%;
          height: 100%;
        }

        .message-for {
          margin: 30rpx 0;
          border: none;

          .collecttexe {
            padding: 20rpx 40rpx;
            background: rgb(80, 80, 80);
            color: #fff;
          }

          .liuyanbox {
            width: 90%;
            margin: auto;
            height: 80vh;
            // height: 80%;
            padding: 15rpx 0;

            .payment {
              color: rgb(170, 170, 170);
              font-family: Noto Sans SC;
              font-size: 16px;
              font-weight: 400;
              margin-bottom: 10rpx;
            }

            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .close {
              width: 32rpx;
              height: 32rpx;
            }

            .position {
              margin-bottom: 20rpx;
              display: flex;
              // align-items: center;

              .dingwei {
                padding-top: 10rpx;
                margin-right: 10rpx;
                width: 24rpx;
                height: 24rpx;
              }

              .weizhi {
                font-size: 30rpx;
              }

              .text-green {
                color: rgb(7, 193, 96);
                font-family: Noto Sans SC;
                font-size: 16px;
                font-weight: 400;
                margin-right: 10rpx;
              }
            }

            .evaluate-con {

              .evaluate {
                margin-bottom: 10rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .jiantou {
                  width: 16rpx;
                  height: 16rpx;
                }

                .huise {
                  margin-left: 10rpx;
                  color: rgb(150, 150, 150);
                }
              }

              .tag-flex {
                display: flex;
                flex-wrap: wrap;
                background-color: #fff;

                .u-page__tag-item {
                  margin-bottom: 20rpx;
                  margin-right: 20rpx;
                }
              }

              .user-con {
                padding-bottom: 20rpx;
                margin-bottom: 20rpx;
                border-bottom: 3rpx solid #ccc;

                .user-top {
                  display: flex;
                  margin-bottom: 15rpx;
                  position: relative;

                  .img1 {
                    width: 108rpx;
                    height: 108rpx;
                  }

                  .sex {
                    width: 28rpx;
                    height: 28rpx;
                    padding: 0 10rpx 10rpx 0;
                    position: absolute;
                    top: 70%;
                    left: 0%;

                    image {
                      // margin: auto;
                      width: 28rpx;
                      height: 28rpx;
                    }
                  }

                  .text {
                    margin-left: 20rpx;

                    .text1 {
                      color: rgb(51, 51, 51);
                      font-family: Noto Sans SC;
                      font-size: 32rpx;
                    }

                    .text2 {
                      color: rgb(170, 170, 170);
                      font-family: Noto Sans SC;
                      font-size: 28rpx;
                    }
                  }
                }

                .user-bottom {
                  display: flex;

                  .text {
                    background-color: #F0F0F0;
                    border-radius: 10rpx;
                    margin-right: 15rpx;
                    color: rgb(150, 150, 150);
                    padding: 8rpx;
                    font-family: Noto Sans SC;
                    font-size: 28rpx;
                  }
                }
              }


            }

          }

          // 留言虽有
          // <!-- 转发 -->
          .forward {
            // width: 90vw;
            // margin: auto;
            padding: 20rpx 0;

            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: auto;
              margin-bottom: 20rpx;
              padding: 0 5% 20rpx 5%;
              border-bottom: 3rpx solid #ccc;
            }

            .close {
              width: 32rpx;
              height: 32rpx;
            }

            .forword-top {
              // w: 90%;

              display: flex;
              align-items: center;

              .img3 {
                width: 64rpx;
                height: 64rpx;
              }

              .name {
                margin: 0 15rpx;
              }

              .jiantou {
                width: 20rpx;
                height: 16rpx;
              }
            }

            .forward-people {
              width: 90%;
              margin: auto;

              .title {
                font-size: 30rpx;
                font-weight: bold;
                margin-bottom: 20rpx;
              }

              .people {
                display: flex;

                .people-for {
                  width: 110rpx;
                  // border: 1px solid #000;
                  position: relative;
                  margin-right: 28rpx;
                }

                .name {
                  color: rgb(150, 150, 150);
                  // width: 50%;
                  font-family: Noto Sans SC;

                  font-size: 12px;
                }

                .img1 {
                  width: 108rpx;
                  height: 108rpx;
                }

                .red {
                  width: 28rpx;
                  height: 28rpx;
                  padding: 0 10rpx 10rpx 0;
                  position: absolute;
                  top: 40%;
                  left: 60%;
                }

                .sex {
                  width: 28rpx;
                  height: 28rpx;
                  padding: 0 10rpx 10rpx 0;
                  position: absolute;
                  top: 40%;
                  left: 0%;

                  image {
                    // margin: auto;
                    width: 28rpx;
                    height: 28rpx;
                  }
                }
              }
            }

            .forward-con {
              .share-bottom {
                display: flex;
                justify-content: space-around;
                padding: 40rpx 0;

                .share-bottom-item {
                  .share-image {
                    image {
                      width: 120rpx;
                      height: 120rpx;
                    }
                  }

                  .share-tit {
                    color: #878787;
                    font-size: 28rpx;
                  }
                }
              }
            }

            .forward-con1 {
              width: 90%;
              margin: auto;

              .forward-con1-top {
                display: flex;
                justify-content: space-between;

                .textarea {
                  width: 50%;
                }

                .kong {
                  width: 5%;
                }

                .img4 {
                  width: 30%;
                  height: 170rpx;
                }
              }

              .button {
                width: 80%;
                margin: auto;
                margin-top: 20rpx;
              }
            }
          }

          // <!-- 转发 -->
        }

        .number {
          color: #fff;
        }
      }

    }
  }
</style>